<template>
	<view class="index">
		<view class="item-wrapper" :class="{'current': item.selected }" v-for="(item,index) in list" :key="index">
			<view class="title-wrapper" @click="selectItem(item)">
				<view class="title">
					<text>{{ item.reason }}</text>
					<!-- <uni-icons v-if="item.children.length && !item.open" type="down" size="18"
						color="#666666"></uni-icons>
					<uni-icons v-if="item.children.length && item.open" type="up" size="18" color="#666666"></uni-icons> -->
				</view>
				<view class="misc">
					{{ item.reasonDesc }}
				</view>
			</view>
			<!-- <view v-if="item.children.length && item.open" class="content-wrapper">
				<view class="item" @click="selectItem(items,item)" v-for="(items,indexs) in item.children"
					:key="indexs">
					<uni-icons v-if="items.selected" type="checkbox-filled" size="22" color="#f26022"
						class="icon"></uni-icons>
					<uni-icons v-else type="circle" size="22" color="#888888" class="icon"></uni-icons>
					<text>{{ items.reason }}</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				isOutStock: false,
			}
		},
		onLoad(option) {
			this.isOutStock = JSON.parse(option.isOutStock)
			this.getReason(option.reasonId, option.reasonIiId)
		},
		methods: {
			async getReason(reasonId, reasonIiId) {
				console.log(reasonId, reasonIiId)
				const data = await this.$api.post('/app/after-sale-reason/listNoPage', {
					"orders": [{
						"asc": true,
						"column": "reasonSort"
					}],
				})
				if (data.code === 200) {
					this.list = data.data.filter(item => {
						item.children = [];
						item.open = false;
						item.selected = reasonId === item.id;
						let bool = true;
						if (this.isOutStock) {
							bool = item.type === 0
						}
						return item.parentId == '0' && bool
					})
					data.data.forEach(item => {
						this.list.forEach(row => {
							if (row.id === item.parentId) {
								item.selected = reasonIiId === item.id;
								if (item.selected) {
									row.open = true;
								}
								row.children.push(item)
							}
						})
					})
					console.log(this.list)
				}
			},
			selectItem(item, items) {
				// if (item.children.length) {
				// 	item.open = !item.open;
				// 	return
				// }
				let pages = getCurrentPages();
				if (items) {
					item.parentName = items.reason;
					item.type = items.type;
				}
				pages[pages.length - 2].$vm.setReason(item)
				uni.navigateBack()
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: auto;
		padding-bottom: 100rpx;

		.item-wrapper {
			margin: 20upx 20upx 0 20upx;
			border-radius: 20rpx;
			background-color: #fff;

			&.current {
				box-shadow: 0 0 15rpx #F26022bb;
			}

			.title-wrapper {
				padding: 20rpx;

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32upx;
					font-weight: bold;
					color: #212121;
				}

				.misc {
					margin-top: 10rpx;
					font-size: 28upx;
					color: #777777;
				}
			}

			.content-wrapper {
				padding: 20rpx 30upx 20rpx 30rpx;
				font-size: 28upx;
				border-top: 1upx dashed #efefef;

				.item {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.icon {
						margin-right: 5rpx;
					}
				}
			}
		}

	}
</style>